<template>
  <div class="container clearfix">
    <div class="clearfix">
      <div class="body leftfix">
      <img src="./images/人体图.jpg" alt="">
    </div>
    <div class="username leftfix">
      <div>用户名：{{this.user.username}}
        <!-- &nbsp;<i class="el-icon-edit" @click="revise3"></i> -->
      </div>
    </div>
    <div class="gender1 leftfix">
      <div class="gender">性&nbsp;&nbsp;&nbsp;别：{{this.user.gender}}</div>
    </div>
    <div class="height1 leftfix">
      <div class="height">身&nbsp;&nbsp;&nbsp;高：{{this.user.height}}cm
      &nbsp;<i class="el-icon-edit" @click="revise1"></i>
    </div>
    </div>
    <div class="weight1 leftfix">
      <div class="weight">体&nbsp;&nbsp;&nbsp;重：{{this.user.weight}}kg
        &nbsp;<i class="el-icon-edit" @click="revise2"></i>
      </div>
    </div>
    <div class="labors1 leftfix">
      <div class="labors">劳动等级：{{this.user.labor}}
        &nbsp;<i class="el-icon-edit" @click="revise5"></i>
      </div>
    </div>
    <div class="years1 leftfix">
      <div class="years">年&nbsp;&nbsp;&nbsp;龄：{{this.user.years}}岁
        &nbsp;<i class="el-icon-edit" @click="revise6"></i>
      </div>
    </div>
    <div class="energy leftfix">日常所需能量：{{this.user.energy}}千卡</div>
    <div class="revise leftfix" >
      <el-button  type="primary" @click="revise4">确认修改</el-button>
    </div>
  </div>
  <div class="block" style="margin-bottom: 55px;margin-left: 320px;">
    <el-date-picker
      v-model="value2"
      type="daterange"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
    </el-date-picker><el-button @click="submit">确认提交</el-button>
  </div>
    <div id="orderline" style="width: 90%;height:500px;margin-left: 50px;"></div>
    </div>
</template>

<script>
import axios from 'axios';
let Echarts = require('echarts/lib/echarts'); //基础实例 注意不要使用import
 require('echarts/lib/chart/radar');
export default {
    data() {
      return {
        user:{},
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: '',
        value2: '',
        pickdata: {
                    startTime: '',
                    endTime: '',
                },
        xAxisData:[],
        seriesData:[],
        energys:[]
      }
    },
    methods: {
    revise1() {
      var newData = prompt("身高为:");
      if (newData !== null) {
        this.user.height = newData;
      }
    },
    revise2() {
      var newData = prompt("体重为:");
      if (newData !== null) {
        this.user.weight = newData;
      }
    },
    revise3() {
      var newData = prompt("用户名为:");
      if (newData !== null) {
        this.user.username = newData;
      }
    },
    revise5() {
      alert("请遵循以下修改规则：\n1——乏活动（床上休息）\n2——轻度活动（每周1-3次轻度运动）\n3——中度活动（每周3-5次中等强度运动） \n4——重度活动（每周6-7次高强度运动） \n5——非常重度活动（每天进行非常重度的运动或体力劳动工作） \n\n注意：修改时输入对应的数字")
      var newData = prompt("劳动等级为:");
      if (newData !== null) {
        this.user.labor = newData;
      }
    },
    revise6() {
      var newData = prompt("年龄为:");
      if (newData !== null) {
        this.user.years = newData;
      }
    },
    revise4(){
      axios.put('/api/user/updateUser',{
          username:this.user.username,
          height:this.user.height,
          weight:this.user.weight,
          userId:this.user.userId,
          labor:this.user.labor,
          years:this.user.years,
          gender:this.user.gender
        },{
        headers:{
            token:localStorage.getItem('token')
          }
        }
      )
      .then(res=>{
        this.user.energy=res.data.energy
        this.user.labor=res.data.labor
        alert("更新成功")
        // location.reload()
        this.$router.push('/personalInformation')
      })
    },
    getOrderLine() {
      let myChart =Echarts.init(document.getElementById('orderline'))
      myChart.setOption(
        {
          title: {
            text: '查看每日摄入详情'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['身体每日所需能量', '每日摄入能量']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data:this.seriesData
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '每日摄入能量',
              type: 'line',
              stack: 'Total',
              data:this.xAxisData
            },
            {
              name: '身体每日所需能量',
              type: 'line',
              // stack: 'Total',
              data: this.energys
            },
          ]
        }
      )
    },
    submit(){
      this.pickdata.startTime=this.value2[0]
        this.pickdata.endTime=this.value2[1]
        if(this.pickdata.startTime.getTime() === this.pickdata.endTime.getTime()){
          alert("时间输入错误，请重新输入")
        }else{
          axios.get('/api/dish/findDishByTime',{params:{startTime:this.pickdata.startTime,endTime:this.pickdata.endTime,username:localStorage.getItem('username'),energy:this.user.energy},headers:{token:localStorage.getItem('token')}})
        .then(res=>{
          this.xAxisData=res.data.number
          this.seriesData=res.data.sum
          this.energys=res.data.mag
          this.getOrderLine()
        }).catch(error=>{
          console.log(error)
        })
        }

    }

  },
    mounted(){
      axios.get('/api/user/userInfo',{
        params:{
          username:localStorage.getItem('username')
        },
        headers:{
            token:localStorage.getItem('token')
          }
      })
      .then(res=>{
        if(res.code==1){
          this.user=res.data
          localStorage.setItem('energy',this.user.energy)
        }
      })
      .catch(err=>{
        alert('请求失败')
      })


    },
    }
</script>

<style>
.container{
  background-color: rgb(255, 255, 255);
  width: 1160px;
}
.body {
    margin-left: 135px;
    width: 215px;
    height: 700px;
  }

  .height1 {
    width: 230px;
    height: 50px;
    /* background-color: green; */
    margin-top: 70px;
    margin-left: 170px;
  }
  .username{
    width: 230px;
    height: 50px;
    margin-top: 100px;
    margin-left: 170px;
  }
  .height2{
    width: 200px;
    height: 50px;
    /* background-color: green; */
    margin-top: 100px;
    margin-left: 140px;
  }

  .leftfix {
    float: left;
  }

  .rightfix {
    float: right;
  }

  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }

  .weight1 {
    width: 230px;
    height: 50px;
    /* background-color: rgb(214, 48, 27); */
    margin-top: 70px;
    margin-left: 160px;
  }

  .tall {
    width: 300px;
    height: 50px;
    /* background-color: green; */
    margin-top: 100px;
    margin-left: 170px;
  }
  .energy{
    width: 450px;
    height: 60px;
    /* background-color: green; */
    margin-top: 70px;
    margin-left: 165px;
    font-size: xx-large;
    font-weight: bolder;
  }
  .username,.gender,.height,.weight,.labors,.years{
    font-size: x-large;
    font-weight: bolder;
  }
  .gender1{
    width: 230px;
    height: 50px;
    /* background-color: rgb(214, 48, 27); */
    margin-top: 100px;
    margin-left: 160px;
  }
  .revise{
    margin-left: -450px;
    margin-top: 205px;
  }
  .height3{
    width: 250px;
    height: 50px;
    /* background-color: green; */
    margin-top: 100px;
    margin-left: 140px;
  }
  .labors1{
    width: 320px;
    height: 50px;
    /* background-color: green; */
    margin-top: 70px;
    margin-left: 168px;
  }
  .years1{
    width: 230px;
    height: 50px;
    /* background-color: rgb(214, 48, 27); */
    margin-top: 70px;
    margin-left: 73px;
  }
</style>
